<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入ElementUI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="divUserInfo" style="width: 80%;margin: 0px auto">

    <!--查询条件部分-->
    <el-form ref="userBeanForm" :model="userBeanForm" label-width="80px">
        <el-row>
            <el-col :span="12">
                <el-form-item label="用户姓名">
                    <el-col :span="18">
                        <el-input v-model="userBeanForm.username"></el-input>
                    </el-col>
                </el-form-item>
            </el-col>

            <el-col :span="12">
                <el-form-item label="年龄">
                    <el-col :span="11">
                        <el-input v-model="userBeanForm.userage"></el-input>
                    </el-col>
                    <el-col class="line" :span="1" :offset="1">-</el-col>
                    <el-col :span="11">
                        <el-input v-model="userBeanForm.userage2"></el-input>
                    </el-col>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="12">
                <el-form-item label="地址">
                    <el-col :span="18">
                        <el-input v-model="userBeanForm.useraddress"></el-input>
                    </el-col>
                </el-form-item>
            </el-col>

            <el-col :span="12">
                <el-form-item label="注册日期">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="开始时间" v-model="userBeanForm.userregdate"
                                        style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="1" :offset="1">-</el-col>
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="结束时间" v-model="userBeanForm.userregdate2"
                                        style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
            </el-col>
        </el-row>

        <el-form-item>
            <el-row>
                <el-col :span="8">
                    <el-button type="primary" @click="doquery">查询</el-button>
                </el-col>
                <el-col :span="8">
                    <el-button type="info" @click="resetForm(userBeanForm)">重置</el-button>
                </el-col>
                <el-col :span="8">
                    <el-button type="success" @click="addUserInfo()">新增</el-button>
                </el-col>
            </el-row>
        </el-form-item>
    </el-form>

    <!--查询结果集显示部分-->
    <!--data属性绑定的是vue组件中的数据结果集，如果data绑定的数据发生变化，则table会进行自动更新【由vue的数据的双向绑定功能实现】-->
    <el-row>
        <el-table
                ref="multipleTable"
                :data="lstUserInfo"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>

            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>

            <el-table-column
                    prop="username"
                    label="用户姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="userage"
                    label="年龄"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="useraddress"
                    label="地址"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="userregdate"
                    label="注册日期"
                    width="180">
                <!--<template slot-scope="scope">{{ scope.row.date }}</template>-->
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="200">

                <!--使用template模板的 slot-scope="scope" 表示，scope将获取table绑定的数据源中对应的当前行的数据对象，
                    可以通过 scope.row.data获取当前行的数据对象并传递给响应事件函数；

                    通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据
                -->
                <template slot-scope="scope">
                    <el-button :plain="true" type="success" size="small" icon="edit" @click="editClick(scope.row)">编辑
                    </el-button>
                    <el-button :plain="true" type="danger" size="small" icon="delete"
                               @click="deleteClick(scope.row.userid)">
                        删除
                    </el-button>
                </template>

            </el-table-column>
        </el-table>
    </el-row>

    <!--列表底部工具条和分页符-->
    <el-row style="margin-top: 20px" type="flex" justify="end">
        <!--批量删除按钮-->
        <el-col :span="6">
            <el-button :plain="true" type="danger" size="small" icon="delete" @click="removeSelections">批量删除</el-button>
        </el-col>
        <!--分页工具（使用pagehelper进行物理分页）-->
        <el-col :span="18">
            <el-pagination
                    style="float: right"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[2, 3, 5, 10]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-col>
    </el-row>
    <!--<div style="margin-top: 20px">
        <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
        <el-button @click="toggleSelection()">取消选择</el-button>
    </div>-->

    <!--新增模态框部分:elementUI要求dialog单独放置-->
    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="60%"
            :before-close="handleClose">
        <el-form :model="editFormData" label-width="80px" :rules="editFormRules" ref="editForm">
            <el-row>
                <el-col :span="10">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="editFormData.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="10">
                    <el-form-item label="密码">
                        <el-input type="password" v-model="editFormData.userpsw" placeholder="请输入密码"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="10">
                    <el-form-item label="年龄">
                        <el-input v-model="editFormData.userage" placeholder="请输入年龄"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="地址">
                        <el-input v-model="editFormData.useraddress" placeholder="请输入地址"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>

                <el-col :span="10">
                    <el-form-item label="注册日期">
                        <el-date-picker type="date" placeholder="请输入注册时间" v-model="editFormData.userregdate"
                                        format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                                        style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveOrUpdateUserInfo()">确 定</el-button>
        </span>
    </el-dialog>

</div>
<!--引入vue的库，一定要在element库文件之前-->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/element-ui/lib/table.js"></script>
<!--引入axios库，完成后台异步请求的http通信，替代jquery ajax（也可以使用）-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--解决axios跨域无法传递form表单数据到后台实体类的问题-->
<script src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>
<!--使用vue组件进行处理-->
<script type="text/javascript">
    var app = new Vue({
            el: "#divUserInfo",
            data: {
                // form表单绑定的实体类数据结构
                // 数据模型和form表单绑定
                userBeanForm: {
                    username: '',
                    userpsw: '',
                    userage: '',
                    userage2: '',
                    useraddress: '',
                    userregdate: '',
                    userregdate2: ''
                },
                // table表格绑定的数据结果集【数组和list集合】
                // 数据模型和table显示列表绑定
                lstUserInfo: [],
                // dialog是否进行显示的数据结构
                dialogVisible: false,
                // dialog修改和新增对话框中的数据结构
                editFormData: {
                    userid: null, // 默认值为null，用于区分新增还是修改
                    username: '',
                    userpsw: '',
                    useraddress: '',
                    userregdate: '',
                },
                // 选中框，多选框--存储表格左侧数据行的多选选定的记录的id到一个数组数据结构中
                multipleSelection: [],

                /////////////分页相关/////////////////
                //当前页
                currentPage: 1,
                //分页大小
                pageSize: 5,
                //总记录数
                total: 0,
            },
            methods: {
                /*查询部分的方法*/
                doquery: function () {
                    let req_data = Qs.stringify(this.userBeanForm);
                    // 当前this对象进行别名处理
                    _self = this;
                    // 同服务器进行异步通信，验证用户登陆的合法性
                    axios.post('http://localhost:9091/springboot_vue_elementui_server20191025/doAjaxUserInfoQueryByPramas', req_data)
                        .then(function (response) {
                            console.log(response.data);
                            // 更新vue的table的数据模型 lstUserInfo
                            _self.lstUserInfo = response.data;
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
                ,
                // 重置表单数据
                resetForm(formName) {
                    //this.$refs[formName].resetFields();
                }
                ,
                /*数据显示部分的方法*/

                // 处理显示列表左侧多选框的方法
                handleSelectionChange: function (val) {
                    // val对象中保存的是table中的每一行的数据对象
                    for (var i = 0; i < val.length; i++) {
                        // 取出当前行的数据对象
                        var row = val[i];
                        // 将当前行的数据的主键值存储多选数组中
                        this.multipleSelection[i] = row.userid;
                    }
                    //this.multipleSelection = val;
                    console.log("表格左侧多选：：：：：")
                    console.info(this.multipleSelection);
                },
                // 表格左侧多选框的批量删除操作
                removeSelections: function () {
                    // TODO  批量删除功能作为课下作业，独立完成
                },
                // 进行编辑操作--弹出dialog对话框
                editClick: function (rowData) {
                    // 设置dialog的visible.sync属性绑定的值为true进行显示，false进行关闭
                    this.dialogVisible = true;
                    // 使用Object.assign方法从scope.row传递过来的对象中提取数据
                    this.editFormData = Object.assign({}, rowData);
                },
                // 进行新增操作--弹出dialog对话框
                addUserInfo: function () {
                    // 设置dialog的visible.sync属性绑定的值为true进行显示，false进行关闭
                    this.dialogVisible = true;
                    // 将dialog绑定的数据设置为空，进行新增操作
                    this.editFormData = {
                        userid: null, // 默认值为null，用于区分新增还是修改
                        username: '',
                        userpsw: '',
                        useraddress: '',
                        userregdate: '',
                    };
                },
                // 新增和修改dialog对话框的确定按钮事件处理
                saveOrUpdateUserInfo: function () {
                    let req_data = Qs.stringify(this.editFormData);
                    // 当前this对象进行别名处理
                    _self = this;
                    // 同服务器进行异步通信，验证用户登陆的合法性
                    axios.post('http://localhost:9091/springboot_vue_elementui_server20191025/saveOrUpdateUserinfoWithOutFileRest', req_data)
                        .then(function (response) {
                            console.log(response.data);
                            // 更新vue的table的数据模型 lstUserInfo
                            //_self.lstUserInfo = response.data;
                            // 如果新增或者修改成功，则重新调用查询方法进行查询操作
                            _self.doquery();
                            // 关闭对话框
                            _self.dialogVisible = false;
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                // 进行删除操作
                deleteClick: function (userid) {
                    // 将this对象以别名的形式进行定义【？ js的this作用于有关】
                    _self = this;
                    // 使用确认框，确认用户是否进行删除操作
                    this.$confirm('是否删除该记录?', '删除警告', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        // 使用axios异步通信进行删除操作
                        axios.post('http://localhost:9091/springboot_vue_elementui_server20191025/doAjaxUserInfoDeleteByIDRest', Qs.stringify({"userid": userid})
                        ).then(function (response) {
                            // 提示用户删除成功
                            _self.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            // 重新查询
                            _self.doquery();
                            //_self.doquery(_self.currentPage, _self.pageSize);
                        }).catch(function (error) {
                            console.log(error);
                        });
                        // 使用axios异步通信进行删除操作end
                    });
                },
                // 弹出对话框相关处理事件
                handleClose: function (done) {
                    this.$confirm('确认关闭？')
                        .then(_ => {
                            // 调用done函数，继续进行dialog后续的处理
                            done();
                        })
                        .catch(_ => {
                        });
                },

                // 使用pagehelper的分页处理事件
                // 每页页面大小发生变化事件的处理
                handleSizeChange: function () {

                },
                // 分页工具的页码发生变化的事件处理
                handleCurrentChange: function () {

                }

            }
        })
    ;

</script>
</body>
</html>